<template>
    <div>
        <!-- <input type="text" v-model="mytext" @input="onInput"> 搜索框 -->
        <input type="text" v-model="mytext"> 搜索框
        <ul>
            <!--第一 二种方式-->
            <!-- <li v-for="item in arr" :key="item"> -->
                <!-- <div v-if="item.includes(mytext)"> {{ item }}</div> -->
                <!-- {{ item }}
            </li> -->
            <!--第三种方式 优化代码-->
            <li v-for="item in arrinput()" :key="item">
                <!-- <div v-if="item.includes(mytext)"> {{ item }}</div> -->
                {{ item }}
            </li>
        </ul>
    </div>

</template>
<script>
export default {
    data() {
        return {
            /**
             * v-on 事件绑定
             * v-bind 属性绑定
             * v-show 和v-if的区别
             * v-for 循环 
             */
            arr: ['aaa', 'abc', 'abb', 'acd', 'bbb', 'bbc', 'bcd', 'ccc', 'cdd'],
            arrs: ['aaa', 'abc', 'abb', 'acd', 'bbb', 'bbc', 'bcd', 'ccc', 'cdd'],
            mytext:''
        }
    },
    methods: {
        onInput() {
            // console.log(this.mytext)
            //第一种方法 有bug 不能回退
            // this.arr = this.arr.filter(item => {
            //    return item.includes(this.mytext)
            // })
            this.arr = this.arrs.filter(item => {
                return item.includes(this.mytext)
             })
           console.log(this.arr);
          
        },
        arrinput() {
            return this.arr.filter(item => {
                return item.includes(this.mytext)
            })
        }
    }
}
</script>